<template>
	<view class="x-food-view">
		<x-image width="176rpx" height="176rpx" src="https://img02.mockplus.cn/idoc/ps/2020-12-23/266b6aa0-4531-11eb-b885-e340c5161628.png"></x-image>
		<view class="x-food-view-box">
			<view class="x-food-view-box-title">优质胡辣汤</view>
			<view class="x-food-view-box-desc">汤汁粘稠,料多多</view>
			<view class="x-food-view-box-sales">月售389</view>
			<view class="x-food-view-box-price">
				<text>￥12.98</text>
				<text>￥19.98</text>
			</view>
		</view>
	</view>
</template>

<script>
	import xImage from '../x-image/x-image.vue';
	import xBox from '../x-box/x-box.vue';
	
	export default {
		components:{
			'x-box':xBox,
			'x-image':xImage,
		},
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss" scoped>
@import  '../../uni.scss';
.x-food-view {
	
	@include flex(space-between,'','');
	margin-bottom: 32rpx;
	&-box {
		flex-grow: 0.9;
		@include flex(space-between,flex-start,column);
		
		&-title {
			color: #333642;
			font-size: 30rpx;
		}
		&-desc,&-sales{
			color:#9398AD;
			font-size: 26rpx;
			line-height: 20rpx;
		}
		
		&-price text:nth-child(1){
			color: #F13A3A;
			font-weight: 600;
			font-size: 30rpx;
		}
		&-price text:nth-child(2) {
			color: #9398AD;
			font-size: 26rpx;
			margin-left: 13rpx;
		}
	}
}
</style>
